<!-- 档案查看页面 -->
<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="4">
        <el-tabs
          v-model="activeName"
          style="background-color: white"
          type="card"
        >
          <el-tab-pane label="机构" name="zzjg">
            <el-row style="position: relative">
              <el-col
                :span="25"
                style="overflow: auto; width: 100%"
                :style="{ height: heightTree }"
              >
                <radioOrgTree @init="init" ref="dialogRadioOrgTree" />
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="查询">
            <el-row style="position: relative">
              <el-col
                :span="25"
                style="overflow: auto; width: 100%"
                :style="{ height: heightTree }"
              >
                <div :style="{ height: heightTree }">
                  <div style="width: 100%">
                    <table class="ltp-searchtable">
                      <tr @click="openChooseOrgTree()">
                        <th style="font-size: 14px">机构：</th>
                        <td>
                          <el-input
                            v-model="treeLabel"
                            readonly
                            placeholder="请选择机构"
                          />
                        </td>
                      </tr>
                      <tr style="margin-top: 10px">
                        <th style="font-size: 14px">姓名/身份证：</th>
                        <td>
                          <el-input
                            v-model="searchValue"
                            placeholder="请输入人员姓名/身份证"
                          />
                        </td>
                      </tr>
                    </table>
                  </div>
                  <div
                    style="
                      width: 100%;
                      text-align: center;
                      margin-bottom: 20px;
                      padding: 0 20px;
                    "
                  >
                    <el-button
                      type="info"
                      icon="el-icon-refresh-left"
                      style="margin-top: 5px"
                      @click="resetform()"
                      >重置</el-button
                    >
                    <el-button
                      type="primary"
                      icon="el-icon-search"
                      style="margin-top: 5px"
                      @click="init('select')"
                      >&nbsp;查询</el-button
                    >
                  </div>
                </div>
                <div style="height: 35px">
                  <div
                    style="
                      width: 100%;
                      text-align: center;
                      margin: 5px 10px 0 20px;
                    "
                  ></div>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="20">
        <vxe-table
          border
          header-align="center"
          ref="mytable"
          :loading="loading"
          highlight-current-row
          highlight-hover-row
          :height="heightY"
          :export-config="{ modes: ['current', 'selected', 'all'] }"
          :data="tableData"
          @checkbox-all="selectAllEvent"
          @checkbox-change="selectChangeEvent"
          show-overflow
        >
          <vxe-table-column
            field="xuanzhong"
            type="checkbox"
            width="60"
            align="center"
            fixed="left"
          ></vxe-table-column>
          <!--        <vxe-table-column field="xuhao" type="seq" title="序号" width="60" align="center" fixed="left"></vxe-table-column>-->
          <vxe-table-column
            type="html"
            field="xingming"
            title="姓名"
            width="100"
            align="center"
            fixed="left"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="sfzh"
            title="身份证号"
            width="200"
            align="center"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="zhiwu_quancheng"
            title="工作单位及职务（全称）"
            width="500"
            sortable
          >
            <template #default="{ row }">
              <span>{{ row.zhiwu_quancheng }}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column
            field="zhiwu_jiancheng"
            title="工作单位及职务"
            width="500"
            sortable
            show-overflow
          >
            <template #default="{ row }">
              <span>{{ row.zhiwu_jiancheng }}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column
            field="zw_sj"
            title="任现职时间"
            cell-type="string"
            align="center"
            width="140"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="xingbie"
            title="性别"
            align="center"
            width="100"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="csny"
            title="出生年月"
            cell-type="string"
            align="center"
            width="120"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="minzu_mc"
            title="民族"
            align="center"
            width="100"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="jiguan"
            title="籍贯"
            align="center"
            width="100"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="chushengdi"
            title="出生地"
            align="center"
            width="120"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="cjgzsj"
            title="参加工作时间"
            cell-type="string"
            align="center"
            width="160"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="rdsj"
            title="入党时间"
            cell-type="string"
            align="center"
            width="120"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="qrzxl_zg"
            title="最高全日制学历"
            align="center"
            width="180"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="qrzxlxx_zg"
            title="学校及院系名称（全日制学历）"
            align="center"
            width="300"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="qrzxw_zg"
            title="最高全日制学位"
            align="center"
            width="180"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="qrzxwxx_zg"
            title="学校及院系名称（全日制学位）"
            align="center"
            width="300"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="zzxl_zg"
            title="最高在职学历"
            align="center"
            width="160"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="zzxlxx_zg"
            title="学校及院系名称（在职学历）"
            align="center"
            width="300"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="zzxw_zg"
            title="最高在职学位"
            align="center"
            width="160"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="zzxwxx_zg"
            title="学校及院系名称（在职学位）"
            align="center"
            width="300"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="zwcc"
            title="任现职务层次"
            align="center"
            width="160"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="zwcc_sj"
            title="职务层次时间"
            cell-type="string"
            align="center"
            width="160"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="zjcc_mc"
            title="任现职级层次"
            align="center"
            width="160"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="zjcc_sj"
            title="职级层次时间"
            cell-type="string"
            align="center"
            width="160"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="gzjb"
            title="级别"
            align="center"
            width="100"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="zyjszw"
            title="专业技术职务"
            align="center"
            width="160"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="zyjsgwyrzzg"
            title="专业技术类公务员任职资格"
            align="center"
            width="300"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="zhuanyejishu"
            title="专长"
            align="center"
            width="180"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="gllb"
            title="管理类别"
            align="center"
            width="120"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="rylb"
            title="人员类型"
            align="center"
            width="120"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="bzlx"
            title="编制类型"
            align="center"
            width="120"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="gwydjsj"
            title="公务员登记时间"
            cell-type="string"
            align="center"
            width="180"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="lngzjl_bz"
            title="是否两年以上基层工作经历"
            align="center"
            width="300"
            sortable
          >
            <template slot-scope="scope">
              <span v-if="scope.row.lngzjl_bz == '1'">是</span>
              <span v-if="scope.row.lngzjl_bz == '0'">否</span>
              <span v-else></span>
            </template>
          </vxe-table-column>
          <vxe-table-column
            field="jiankang"
            title="健康状况"
            align="center"
            width="120"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="glzt"
            title="人员管理状态"
            align="center"
            width="160"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="xl_zg"
            title="最高学历"
            align="center"
            width="120"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="xlxx_zg"
            title="最高学历学校"
            align="center"
            width="180"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="xw_zg"
            title="最高学位"
            align="center"
            width="120"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="xwxx_zg"
            title="最高学位学校"
            align="center"
            width="180"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="xingzheng_jg_mingcheng"
            title="编制关系所在单位"
            align="center"
            width="200"
            sortable
          ></vxe-table-column>
          <vxe-table-column
            field="tuichufangshi_mingcheng"
            align="center"
            title="退出状态"
            width="150"
            sortable
          ></vxe-table-column>
          <vxe-column title="操作" fixed="right" width="200">
            <template slot-scope="scope">
              <el-button
                type="primary"
                @click="handleClickLook(scope.row)"
                size="medium"
                plain
                >浏览</el-button
              >
            </template>
          </vxe-column>
          <template #empty>
            <span style="color: #000">
              <p>暂无数据</p>
            </span>
          </template>
        </vxe-table>
        <div class="row" style="background: #fff">
          <div class="col-sm text-sm-left text-left3 pt-3">
            <vxe-pager
              background
              align="left"
              :current-page.sync="currentPage"
              :page-size.sync="pageSize"
              :total="totalResult"
              size="small"
              :page-sizes="[20, 50, 100, 500, 1000, 5000]"
              :layouts="[
                'PrevJump',
                'PrevPage',
                'JumpNumber',
                'NextPage',
                'NextJump',
                'Sizes',
                'FullJump',
                'Total',
              ]"
              @page-change="handleSizeChange"
            >
            </vxe-pager>
          </div>
        </div>
      </el-col>
    </el-row>
    <div></div>
    <!-- 查詢的机构树 -->
    <orgChooseTree
      ref="dialogTree"
      @onModuleChoosed="onModuleChoosed"
    ></orgChooseTree>
  </div>
</template>
  <script>
import { getUserIsPassDept } from "@/api/datacentersg/achives/documentApi";
import orgChooseTree from "@/views/datacentersg/common/orgChooseTreeLazy";
import radioOrgTree from "@/views/datacentersg/common/radioOrgTreelazy";
import { getPersonByOrg } from "@/api/datacentersg/person/person";
import store from "@/store";

export default {
  components: {
    radioOrgTree,
    orgChooseTree,
  },
  data() {
    return {
      activeName: "zzjg",
      AS0119: "全部",
      findType: "全部",
      heightY: window.innerHeight - 170 + "px",
      heightTree: window.innerHeight - 190 + "px",
      tableData: [],
      currentPage: 1,
      pageSize: 20,
      totalResult: 0,
      treeLabel:'',
      searchValue: "",
      options: [
        {
          value: "选项1",
          label: "选项1",
        },
        {
          value: "选项2",
          label: "选项2",
        },
      ],
      selectedNode: {},
      is_contains_org_child: false,
      jg_id: "",
      loading: false,
      deptIdTree:'',
    };
  },
  created() {
    this.init("init");
  },
  methods: {
    async init(node) {
      // console.log(node,"node");
      this.loading = true;
      this.jg_id = node.id;
      let isContainsOrgChild = "1";
      if (this.is_contains_org_child == false) {
        isContainsOrgChild = "0";
      }
      if(node === "init"){
        this.loading = false;
      }else if(node === "select"){
        let data = this.$refs.dialogRadioOrgTree.node_had.childNodes[0].data;
        // console.log(data,"data");
        this.selectedNode = {
          label: data.jg_mingcheng,
          id: data.jg_id,
          code: data.jg_bianma,
          children: [],
          parentId: data.jg_shangji,
          type: data.jg_leixing,
          icon: data.icon,
          shortName: data.jgjc,
        };
        const pattern = new RegExp("[0-9]+");
        let xingming = ''
        let sfzh = ''
        if((pattern.test(this.searchValue))){
          sfzh = this.searchValue
        }else {
          xingming = this.searchValue
        }

        //判断当前用户有无权限查看'档案'
        // const deptId = node.id && this.selectedNode.id;
        let params = {
          "userId":store.getters.user_id.toString(),
          "deptId":this.deptIdTree,
        }
        // 有权限就让他显示，没有权限就不让他点击“浏览”操作
        getUserIsPassDept(params).then((result)=>{
            if(result.data.res_data == true){
              // console.log(params,"params1")
              // console.log(result.data.res_data,"data1");
              const userInfo = JSON.parse(sessionStorage.getItem(`userInfo`)) || {};
                let personJsons = {
                  userId: store.getters.user_id.toString(),
                  token: store.getters.token.toString(),
                  isEnableEditOrg: userInfo.isEnableEditOrg.toString(),
                  system: "datacenter",
                  is_contains_org_child: isContainsOrgChild,
                  data: {
                    page: this.currentPage,
                    rows: this.pageSize,
                    jg_id: node.id,
                    xingming: this.searchValue,
                    sfzh: this.searchValue,
                    gllb_dm: "",
                    glzt_dm: "1",
                  },
                };
                getPersonByOrg(personJsons)
                  .then((response) => {
                    if (response.result) {
                      this.totalResult = response.resultdata.count; // 设置总记录数
                      this.tableData = response.resultdata.data; // 填充列表数据
                    } else {
                      this.tableData = [];
                      this.$message.error(response.message);
                    }
                    this.loading = false;
                  })
                  .catch(() => {
                    this.$message.error("内部错误！");
                  });
              }else if(result.data.res_data == false){
                this.$message({
                  message: '无权限查看',
                  type: 'warning'
                });
                this.loading = false;
              }
              })
        }else {
          //判断当前用户有无权限查看'档案'
        let params = {
          "userId":store.getters.user_id.toString(),
          "deptId":node.id,
        }
        // 有权限就让他显示，没有权限就不让他点击“浏览”操作
        getUserIsPassDept(params).then((result)=>{
            if(result.data.res_data == true) {
              const userInfo = JSON.parse(sessionStorage.getItem(`userInfo`)) || {};
              let personJsons = {
                userId: store.getters.user_id.toString(),
                token: store.getters.token.toString(),
                isEnableEditOrg: userInfo.isEnableEditOrg.toString(),
                system: "datacenter",
                is_contains_org_child: isContainsOrgChild,
                data: {
                  page: this.currentPage,
                  rows: this.pageSize,
                  jg_id: node.id,
                  xingming: this.searchValue,
                  sfzh: this.searchValue,
                  gllb_dm: "",
                  glzt_dm: "1",
                },
              };
              getPersonByOrg(personJsons)
                .then((response) => {
                  if (response.result) {
                    this.totalResult = response.resultdata.count; // 设置总记录数
                    this.tableData = response.resultdata.data; // 填充列表数据
                  } else {
                    this.tableData = [];
                    this.$message.error(response.message);
                  }
                  this.loading = false;
                })
                .catch(() => {
                  this.$message.error("内部错误！");
                });

            }else if(result.data.res_data == false){
              this.$message({
                message: '无权限查看',
                type: 'warning'
              });
              this.loading = false;
            }
        })
      }
    },
    handleClickLook(row) {
      let route = this.$router.resolve({
        name: "browseRouter",
        query: {
          name: row.xingming,
          idCard: row.sfzh,
        },
      });
      window.open(route.href, "_blank");
      // this.$router.push({
      //   name: "browseRouter",
      //   query: {
      //     name: row.xingming,
      //     idCard: row.sfzh,
      //   },
      // });
    },
    selectAllEvent() {},
    selectChangeEvent() {},
    openChooseOrgTree() {
      this.$refs.dialogTree.init(null);
    },
    async onModuleChoosed(module) {
      this.treeLabel=module.label;
      this.deptIdTree = module.id;
      this.selectedNode = module;
    },
    // 重置
    resetform(){
      this.searchValue = "";
    },
    // 点击分页
    handleSizeChange({ currentPage, pageSize }) {
      this.pageSize = pageSize;
      this.currentPage = currentPage;
      //重新调用
      this.init('select');
    },
  },
};
</script>

  
  <style scoped>
.swiper-container {
  --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
  --swiper-navigation-color: #909399; /* 单独设置按钮颜色 */
  --swiper-navigation-size: 15px; /* 设置按钮大小 */
}

.customRoot-icon {
  width: 20px;
  height: 16px;
  display: inline-block;
}

.customParent-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
}

.customChildren-icon {
  width: 20px;
  height: 18px;
  display: inline-block;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0em;
  fill: currentColor;
  overflow: hidden;
}
>>> .vxe-header--column .vxe-cell--title {
  font-size: 18px;
  font-weight: normal;
  /* color:#909399; */
  font-family: "微软雅黑";
}
>>> .vxe-cell--label {
  font-size: 16px;
  font-family: "微软雅黑";
}
>>> .vxe-table--render-default .vxe-cell {
  font-size: 16px;
  font-family: "微软雅黑";
}
</style>
  